Jest 是一個非常強大的測試框架，簡單易用又富有彈性。在前幾天的文章中，我們有用到 Jest 的部分，並不需要另設自訂的配置，因為 Jest 在簡單的使用情境時，內建的預設配置已足夠我們達到需求。

但在真實的開發應用情境時，我們經常需要依專案情況及需求設定 Jest 配置，尤其是運行在瀏覽器環境的前端應用程式。因為 Jest 是在 node.js 環境執行測試，所以我們需要特別處理 Webpac loader、dynamic imports、module resolution 等等這些瀏覽器與 node 環境並不完全相容的情況。除此之外，掌握「優化」 Jest 配置的技巧，能讓 Jest 在真實開發時發揮更大的幫助。

之後提到的範例是基於自行定義 Webpac 配置的前端專案，沒有使用 create-react-app 這類的 starter。實際開發時，不見得要將之後每個小節提到的範例都配置到專案中，這樣可能造成你的專案過度設計，你只需要將每個小節範例當作獨立的議題來參考，再考慮是不是適用在現在的開發情境。

安裝與運行 Jest

第一步是將 Jest 安裝到 dev dependency：

npm install --save dev jest

在 package.json 加上 test script：

"scripts": {
		...
    "test": "jest"
}

現在可以執行 npm run test 看看，假設在還沒有任何測試檔案的情況下，Jest 會拋出 "no files found." 的 Error，代表它找不到任何測試的檔案可以執行。

這時候新建一個 __tests__ 資料夾，裡面新增 example.js 檔案，簡單寫一個 test code：

test('it works', () => {})

Jest 會自動抓取 __tests__ 資料夾內的測試檔案執行。這時候執行 npm run test，已不會拋出錯誤。也可以新增 example.test.js，這種 .test.js 結尾的檔案，跟 __tests__ 資料夾內的檔案一樣，會被 Jest 自動抓取並執行測試。但若檔案結構較複雜的話，建議還是在欲測試的檔案旁邊建立 __tests__ 資料夾比較好尋找跟管理，例如：

src
├── __tests__
│   └── example.js
└── example.js

配置 npm script

假設專案中有 lint 及 build script，我們可以新增一個 validate script，執行這個 script 代表專案的 code 是在可運作的狀態，裡面依序執行 lint 檢查、 test 跟 build production code：

"scripts": {
		"build": "webpack --mode=production",
		"lint": "jest --config test/jest.lint.js",
		"test": "jest"
    "validate": "npm run lint && npm run test && npm run build",
}